<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2018/11/28 0028
  Time: 下午 5:16
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<head>
    <title>用户管理</title>
</head>
<body>
    <!-- 头部导航 -->
    <c:import url="../menu.jsp"></c:import>
    <c:import url="dialog.jsp"></c:import>
    <div class="mdui-container-fluid">
        <div class ="mdui-row">
            <!--第一行-->
            <div class="mdui-col-xs-3">
                <!--放置标题-->
                <div class="mdui-typo">
                    <h1>用户管理</h1>
                </div>
            </div>
            <br/>
            <div class="mdui-divider-dark"></div>
            <br/>
            <!--第二行-->
            <div class="mdui-col-xs-12 mdui-color-amber-100">

                <!--用户列表   读取数据库里面的所有用户-->
                <ul class="mdui-list" id="users">
                    <c:forEach items="${list }" var="user">
                        <li class="mdui-list-item mdui-ripple">${user.username } </li>
                    </c:forEach>
                </ul>
            </div>
            <br/>
            <div class="mdui-divider-dark"></div>
            <br/>
            <!--第三行   按钮操作   增删改查之类的-->
            <div class="mdui-col-xs-12" id="buts">
                <button class="mdui-btn mdui-ripple" >查看信息</button>
                <button class="mdui-btn mdui-ripple" id="delete">删除用户</button>
                <button class="mdui-btn mdui-ripple" >用户信息修改</button>
                <button  class="mdui-btn mdui-color-theme-accent mdui-ripple" mdui-dialog="{target: '#example-2'}" >添加新用户</button>
            </div>

            <div class="mdui-col-xs-5">
                <p class="mdui-color-blue-200">选择了：</p>
                <p class="mdui-color-blue-200" id="ms"></p>
            </div>
        </div>
    </div>

    <!---->
</body>
<script>
    var $$ = mdui.JQ;
    var name = "";
    var list = $$('#buts').find('button');
    for(var i = 0 ; i < list.length - 1 ; i ++){
        console.log(list[i].textContent);
        $$(list[i]).prop('disabled',true);
        <!--$$('#buts').eq(i).prop('disabled',true);-->
    }
    // 绑定点击事件
    $$('#users').on('click','li', function (e) {
        console.log($$(this).text());
        name = $$(this).text();
        $$('#ms').text(name);

        var list = $$('#buts').find('button');
        console.log(list.length);
        for(var i = 0 ; i < list.length ; i ++){
            console.log(list[i].textContent);
            $$(list[i]).prop('disabled',false);
        }
    });
    $$('#delete').on('click',function (e) {
        alert('删除'+name+"用户！");
        deleteUser(name);
    });


    function  deleteUser(name) {
        var json1 = {
            "conid":1,
            "user":{
                "username":name,
                "password":""
            }
        };
        if(name == ''){
            alert('error');
        }else{
            $$.ajax({
                method: 'POST',
                url:'${pageContext.request.contextPath }/menu/userController',
                dataType:"json",
                contentType: "application/json",
                data:JSON.stringify(json1),
                success:function (data, textStatus, xhr){
                    console.log("succee");
                },
                error:function (xhr,textStatus) {
                    console.log("miss");
                }
            });
        }
    }

</script>
</html>
